import DatePicker from "react-datepicker";
import cn from "classnames";

import "react-datepicker/dist/react-datepicker.css";
import { Tab } from "@/ui/RangeTimePicker/helpers";
import React from "react";
import cls from "./DateTimePicker.module.scss";
import { CalendarIcon, RemoveIcon, TimeIcon } from "./icons";

const now = Date.now();

type Props = {
  date?: Date;
  endDate?: Date;
  minDate?: Date | null;
  maxDate?: Date | null;
  onChange?: (date: Date | undefined) => void;
  onDatesChange?: (dates: Date[]) => void;
  onBlur?: () => void;
  inline?: boolean;
  showTimeInput?: boolean;
  showTimeSelect?: boolean;
  onlyTime?: boolean;
  timeInterval?: number;
  remove?: boolean;
  dateFormat?: string;
  selectsStart?: boolean;
  selectsEnd?: boolean;
  tab?: Tab;
};

export const DateTimePicker: React.FC<Props> = ({
  date,
  endDate,
  minDate,
  maxDate,
  onChange,
  onDatesChange,
  onBlur,
  inline,
  showTimeInput,
  showTimeSelect,
  onlyTime,
  timeInterval,
  remove,
  dateFormat,
  selectsStart,
  selectsEnd,
  tab,
}) => {
  const timeLabel = `Время:`;

  const withTime = showTimeInput || showTimeSelect;
  const defaultDateFormat = withTime ? "d MMMM, p" : "d MMMM";
  const openToDate = (() => {
    if (tab === Tab.start) return date;
    return endDate || date;
  })();

  // @ts-ignore
  // @ts-ignore
  return (
    <div
      className={cn(cls.root, cls.root_icon, {
        [cls.root_with_remove]: remove,
        [cls.root_only_time]: onlyTime,
      })}
    >
      {withTime ? <TimeIcon /> : <CalendarIcon />}

      <DatePicker
        minDate={minDate}
        maxDate={maxDate}
        selected={date}
        // @ts-ignore
        selectsRange={!!onDatesChange}
        startDate={onDatesChange || selectsStart || selectsEnd ? date : null}
        endDate={endDate}
        openToDate={openToDate}
        onChange={(d) => {
          if (Array.isArray(d) && onDatesChange) {
            onDatesChange(d);
          } else if (onChange) {
            // @ts-ignore
            onChange(d as Date);
          }
        }}
        dateFormat={dateFormat || defaultDateFormat}
        selectsStart={selectsStart}
        selectsEnd={selectsEnd}
        timeInputLabel={timeLabel}
        timeCaption={timeLabel}
        timeIntervals={timeInterval || 15}
        showTimeSelect={showTimeSelect}
        showTimeInput={showTimeInput}
        shouldCloseOnSelect={!showTimeInput}
        inline={inline}
        className={cls.field}
        dayClassName={(d) => {
          const isPast = d.getTime() < now;
          return isPast ? cn(cls.day, cls.day_past) : cls.day;
        }}
        onBlur={onBlur}
        fixedHeight
        disabledKeyboardNavigation
      />

      {remove && (
        <button
          className={cls.remove}
          type="button"
          onClick={() => {
            if (onChange) {
              onChange(undefined);
            }
          }}
        >
          <RemoveIcon />
        </button>
      )}
    </div>
  );
};
